<template>
  <div class="">
    <el-upload
      class="upload-demo"
      action="''"
      :limit="1000000"
      :http-request="upload"
      :on-exceed="handleExceed"
      :show-file-list="false"
      :on-remove="() => {}"
      :disabled="disabled"
    >
      <div class="upload-box">
        <el-button
          :class="!disabled ? 'img_but' : ''"
          :disabled="disabled"
        >上传</el-button>
        <div slot="tip" class="img_div">{{ tip }}</div>
      </div>
      <div class="file-box">
        <div v-for="(item, index) in urlList" :key="index">
          <div v-if="fileNameList[index]">
            <span class="span-url" @click="look(item)">{{
              fileNameList[index] | ellipsis
            }}</span>
            <i
              v-if="!disabled"
              class="el-icon-circle-close"
              @click="rmImage(index, $event)"
            />
          </div>
        </div>
      </div>
    </el-upload>
  </div>
</template>

<script>
import OSS from 'ali-oss'
import {
  oss_accessKeyId,
  oss_accessKeySecret,
  oss_bucket,
  oss_host,
  oss_regionId
} from '@/api/config'
import { getFileSuffix, getFileList } from '@/utils/common'
import { Loading } from 'element-ui'

export default {
  name: 'SingleImageUpload',
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 6) {
        return value.slice(0, 6) + '...'
      }
      return value
    }
  },
  props: {
    tip: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    maxcount: {
      type: Number,
      default: 1
    },
    title: {
      type: String,
      default: ''
    },
    format: {
      type: String,
      default: ''
    },
    urls: {
      type: String,
      default: function() {
        return ''
      }
    },
    disabled: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      ossParameter: {
        region: oss_regionId,
        accessKeyId: oss_accessKeyId,
        accessKeySecret: oss_accessKeySecret,
        bucket: oss_bucket,
        host: oss_host
      },
      loadingId: null
    }
  },
  computed: {
    urlList() {
      return this.urls.split(',')
    },
    fileNameList() {
      return getFileList(this.urls)
    }
  },
  methods: {
    handleExceed() {
      this.$message.warning('超出最大上传数量！')
    },
    look(item) {
      window.open(item)
    },
    rmAll() {
      this.fileNameList = []
      this.urlList = []
      this.$emit('getImage', '')
    },
    rmImage(index, e) {
      // delete this.urlList[index]
      e.stopPropagation()
      this.urlList.splice(index, 1)
      this.fileNameList.splice(index, 1)
      this.$emit('getImage', this.urlList.join(','))
    },
    upload(item) {
      var hasFile = this.fileNameList.includes(item.file.name)
      if (hasFile) {
        this.$message.error('文件重复')
        return
      }
      let fileSuffix = getFileSuffix(item.file)
      fileSuffix = fileSuffix.toLowerCase()
      var formatList
      if (this.format !== '') {
        formatList = this.format.split(',')
        if (formatList.indexOf(fileSuffix) < 0) {
          this.$message.error('只能上传' + this.format + '格式文件')
          return
        }
      }
      this.loadingId = Loading.service({
        fullscreen: true,
        text: '上传中，请稍等...'
      })
      const that = this
      const client = new OSS(this.ossParameter)
      // const date = new Date()
      const date = new Date()
      let filename = '/images/' + date.getTime() + '/' + item.file.name
      filename = filename.replace(/,/g,"");
      client
        .put(filename, item.file)
        .then((response) => {
          const url = that.ossParameter.host + filename
          // this.urlList = this.urls.split(',')
          that.urlList.push(url)
          that.fileNameList.push(item.file.name)
          that.$emit('getImage', that.urlList.join(','))
          this.loadingId.close()
        })
        .catch((err) => {
          console.log('err:', err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/mixin.scss";
.upload-box {
  display: flex;
  align-items: center;
}

.upload-container {
  /*width: 100%;*/
  display: flex;
  justify-content: flex-start;
  // align-items: flex-start;
  position: relative;
  @include clearfix;

  .image-uploader {
    float: left;
  }

  .image-preview {
    width: auto;
    height: 200px;
    display: flex;
    flex-direction: row;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    margin-left: 50px;

    .image-preview-wrapper {
      position: relative;
      width: auto;
      // margin-left:10px ;
      height: 100%;

      img {
        height: 100%;
      }
    }

    .image-preview-action {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;

      .el-icon-delete {
        font-size: 36px;
      }
    }

    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }

  .image-app-preview {
    width: auto;
    height: 180px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    margin-left: 50px;

    .app-fake-conver {
      height: 44px;
      position: absolute;
      width: 100%; // background: rgba(0, 0, 0, .1);
      text-align: center;
      line-height: 64px;
      color: #fff;
    }
  }
}

.el-upload-list__item div.filediv {
  width: 100%;
  height: 100%;
}

::v-deep .el-upload-list__item div.filediv img {
  width: 100%;
  max-width: 100%;
}

::v-deep .el-upload__text {
  line-height: 30px;
}
.img_but {
  width: 84px;
  height: 33px;
  color: #5ac6b7;
  border-color: #5ac6b7;
}
.img_div {
  color: #d0d0d0;
  padding-left: 10px;
}
.el-icon-circle-close {
  color: red;
}
.span-url {
  color: #5ac6b7;
}
.file-box {
  display: flex;
  width: 400px;
  flex-wrap: wrap;
  > div > div {
    margin-right: 20px;
  }
}
</style>
